import { useState, useEffect, useRef } from 'react';
import styles from './index.module.less';

const AntdWrapper = (props) => {

  const [focus, setFocus] = useState(false);

  // const listenFocusRef = useRef(null);

  // useEffect(()=>{
  //   console.log(listenFocusRef.current.state)
  // },[listenFocusRef])

  return (
    <div
      className={`${styles.antdWrapper} ${
        focus ? styles.antdFormItemFocused : ''
      }`}
      onFocus={() => setFocus(true)}
      onBlur={() => setFocus(false)}
      style={{ ...props.style }}
    >
      {props.label && <div className={styles.antdLabel} style={{...props?.labelStyle}}>{props.label}</div>}
      <div className={styles.antdContent}>
        {/* <Input ref={listenFocusRef}/>
         <input ref={listenFocusRef}/> */}
        {props.children}
      </div>
      {props.suffix && <div className={styles.antdSuffix}>{props.suffix}</div>}
    </div>
  );
};

export default AntdWrapper;
